<!--
 * @页面名称:角色管理
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="card roleMangage">
    <div class="btn">
      <el-button type="primary" @click="add">新增</el-button>
      <el-button @click="edit">编辑</el-button>
      <el-button type="danger" @click="del">删除</el-button>
    </div>
    <div style="height: calc(100% - 42px)">
      <stable :columns="tableSetting.columns" :data="tableSetting.data" @rowClick="rowClick"></stable>
    </div>
    <!-- <div style="height: 60%">
      <el-tabs v-model="active" type="card" @tab-change="tabChange">
        <el-tab-pane label="菜单权限"></el-tab-pane>
        <el-tab-pane label="全宗权限"></el-tab-pane>
        <el-tab-pane label="分类目录权限"></el-tab-pane>
        <el-tab-pane label="管理全宗"></el-tab-pane>
        <el-tab-pane label="部门权限"></el-tab-pane>
        <el-tab-pane label="工作台"></el-tab-pane>
        <el-tab-pane label="快捷菜单"></el-tab-pane>
      </el-tabs>
      <tab1 v-if="active === '0'" ref="FMtab1"></tab1>
      <tab2 v-if="active === '1'" ref="FMtab2"></tab2>
      <tab3 v-if="active === '2'" ref="FMtab3"></tab3>
      <tab4 v-if="active === '3'" ref="FMtab4"></tab4>
      <tab5 v-if="active === '4'" ref="FMtab5"></tab5>
      <tab6 v-if="active === '5'" ref="FMtab6"></tab6>
      <tab7 v-if="active === '6'" ref="FMtab7"></tab7>
    </div> -->
    <!-- 角色列表新增修改框 -->
    <!-- 预览XML -->
    <el-dialog v-model="dialogSetting.visible" :title="dialogSetting.title" width="30%" draggable>
      <el-form label-width="90px" :model="formData" :rules="rules" ref="formRef">
        <el-form-item label="顺序号:" prop="G_Order">
          <el-input v-model="formData.G_Order"></el-input>
        </el-form-item>
        <el-form-item label="角色名称:" prop="G_Name">
          <el-input v-model="formData.G_Name"></el-input>
        </el-form-item>
        <el-form-item label="选择全宗:" prop="Fonds_ID">
          <el-select v-model="formData.Fonds_ID">
            <el-option v-for="item in fondsData" :key="item.Fonds_ID" :label="item.Fonds_Name" :value="item.Fonds_ID"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="有效期:" prop="G_Validity_Time">
          <!-- <el-select v-model="formData.Fonds_ID">
            <el-option v-for="item in fondsData" :key="item.Fonds_ID" :label="item.Fonds_Name" :value="item.Fonds_ID"></el-option>
          </el-select> -->
          <el-date-picker
            v-model="formData.G_Validity_Time"
            type="date"
            placeholder="请选择日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="启用:" prop="G_Enable">
          <el-checkbox v-model="formData.G_Enable"></el-checkbox>
        </el-form-item>
        <el-form-item label="备注:" prop="G_Remark">
          <el-input v-model="formData.G_Remark"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogSetting.visible = false">取消</el-button>
          <el-button type="primary" @click="handle"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 角色信息 -->
    <el-drawer v-model="isDrawerShow" size="auto" :with-header="false" class="custom-drawer">
      <div class="tab-content">
        <div class="tabs-group">
          <el-tabs v-model="active" tabPosition="left" type="card" @tab-change="tabChange">
            <el-tab-pane label="菜单权限"></el-tab-pane>
            <el-tab-pane label="全宗权限"></el-tab-pane>
            <el-tab-pane label="分类目录权限"></el-tab-pane>
            <el-tab-pane label="管理全宗"></el-tab-pane>
            <el-tab-pane label="部门权限"></el-tab-pane>
            <el-tab-pane label="工作台"></el-tab-pane>
            <el-tab-pane label="快捷菜单"></el-tab-pane>
          </el-tabs>
          <el-button class="btn" @click="save" type="primary">保存</el-button>
        </div>
        <tab1 v-if="active === '0'" ref="FMtab1"></tab1>
        <tab2 v-if="active === '1'" ref="FMtab2"></tab2>
        <tab3 v-if="active === '2'" ref="FMtab3"></tab3>
        <tab4 v-if="active === '3'" ref="FMtab4"></tab4>
        <tab5 v-if="active === '4'" ref="FMtab5"></tab5>
        <tab6 v-if="active === '5'" ref="FMtab6"></tab6>
        <tab7 v-if="active === '6'" ref="FMtab7"></tab7>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="tsx" name="roleManage">
import { ref, reactive, onMounted, nextTick } from "vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
import type { FormInstance, FormRules } from "element-plus";
import { useUserStore } from "@/stores/modules/user";
import { tab1, tab2, tab3, tab4, tab5, tab6, tab7 } from "./components";
import moment from "moment";
const { proxy } = useCurrentInstance();
const userStore = useUserStore();
// 全宗数据
const fondsData = ref<any>([]);
// 表格设置
const tableSetting = reactive({
  columns: [
    { field: "G_Order", title: "顺序号", sortable: true },
    { field: "G_Name", title: "角色名称", sortable: true },
    {
      field: "G_Validity_Time",
      title: "有效期截止时间",
      sortable: true,
      slots: {
        default: ({ row }: any) => {
          return [<span>{row.G_Validity_Time ? moment(row.G_Validity_Time).format("YYYY-MM-DD") : row.G_Validity_Time}</span>];
        }
      }
    },
    {
      field: "G_Enable",
      title: "启用",
      sortable: true,
      slots: {
        default: ({ row }: any) => {
          return [
            <div>
              <el-checkbox disabled v-model={row.G_Enable} />
            </div>
          ];
        }
      }
    },
    { field: "G_Remark", title: "备注", sortable: true },
    {
      title: "操作",
      width: 100,
      align: "center",
      slots: {
        default: ({ row }: any) => {
          return (
            <el-button type="primary" link onClick={() => showDetails(row)}>
              操作
            </el-button>
          );
        }
      }
    }
  ],
  data: []
});
// 弹出框设置
const dialogSetting = reactive({
  visible: false,
  title: ""
});
const isDrawerShow = ref<boolean>(false);
// 表单绑定字段
const formData = ref({
  G_Order: 1,
  Fonds_ID: "",
  G_Name: "",
  G_Remark: "",
  G_Enable: true,
  G_Validity_Time: ""
});
// 表单规则
const rules = reactive<FormRules>({
  Fonds_ID: [{ required: true, message: "请选择全宗!", trigger: "blur" }],
  G_Name: [{ required: true, message: "请填写名称!", trigger: "blur" }]
});
// 定义表单实例
const formRef = ref<FormInstance>();
// tab页绑定字段
const active = ref("0");
const FMtab1 = ref();
const FMtab2 = ref();
const FMtab3 = ref();
const FMtab4 = ref();
const FMtab5 = ref();
const FMtab6 = ref();
const FMtab7 = ref();
// 表格单击保存对象
const clickObj = ref();
// 获取表格数据
const getTableData = () => {
  proxy.$vueAxios.get("Master_Base_Groups/Get", { order: "G_Order asc" }).then((res: any) => {
    res.List.forEach((item: any, index: number) => {
      item.G_Order = index + 1;
    });
    tableSetting.data = res.List;
  });
  getFondsData();
};
// 获取全宗数据
const getFondsData = () => {
  proxy.$vueAxios.get("Master_Base_Fonds/Get", { order: "Fonds_Order asc" }).then((res: any) => {
    fondsData.value = res.List;
  });
};
// 表格单击
const rowClick = ({ row }: any) => {
  clickObj.value = row;
  // getChildrenTable();
};
// 查看角色详情
const showDetails = (row: any) => {
  clickObj.value = row;
  isDrawerShow.value = true;
  getChildrenTable();
};
// 新增
const add = () => {
  formRef.value?.resetFields();
  dialogSetting.title = "新增";
  dialogSetting.visible = true;
};
// 修改
const edit = () => {
  dialogSetting.title = "修改";
  dialogSetting.visible = true;
  nextTick(() => {
    formData.value = Object.assign({}, clickObj.value);
  });
};
// 删除
const del = () => {
  proxy.$messageBox
    .confirm("确定删除该数据？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
    .then(() => {
      proxy.$vueAxios.post("Master_Base_Groups/Delete", [clickObj.value.G_ID]).then((res: any) => {
        if (res.Mark) {
          proxy.$message.success("删除成功");
          getTableData();
        } else {
          proxy.$message.error("删除失败");
        }
      });
    })
    .catch(err => {
      proxy.$message("取消删除");
    });
};
// 弹出框确认事件
const handle = () => {
  formRef.value!.validate((isValid: boolean) => {
    if (isValid) {
      if (dialogSetting.title === "新增") {
        const params = {
          g_ID: proxy.$global.createID(),
          fonds_ID: formData.value.Fonds_ID,
          g_Name: formData.value.G_Name,
          g_Enable: formData.value.G_Enable,
          G_Create_By: userStore.userInfo.U_ID,
          g_Update_By: userStore.userInfo.U_ID,
          g_Remark: formData.value.G_Remark,
          g_Order: formData.value.G_Order,
          g_Validity_Time: formData.value.G_Validity_Time
        };
        proxy.$vueAxios.post("Master_Base_Groups", params).then((res: any) => {
          dialogSetting.visible = false;
          getTableData();
          proxy.$message.success("添加成功");
        });
      } else {
        const params = {
          g_ID: clickObj.value.G_ID,
          fonds_ID: formData.value.Fonds_ID,
          g_Name: formData.value.G_Name,
          g_Enable: clickObj.value.G_Enable,
          G_Create_By: clickObj.value.G_Create_By,
          g_Update_By: clickObj.value.G_Update_By,
          g_Remark: formData.value.G_Remark,
          g_Order: formData.value.G_Order,
          g_Validity_Time: formData.value.G_Validity_Time
        };
        proxy.$vueAxios.put("Master_Base_Groups", params).then((res: any) => {
          dialogSetting.visible = false;
          getTableData();
          proxy.$message.success("修改成功");
        });
      }
    }
  });
};
// tab页切换事件
const tabChange = (val: any) => {
  console.log("触发tab方法", val);
  getChildrenTable();
};
const getChildrenTable = () => {
  nextTick(() => {
    switch (active.value) {
      case "0":
        FMtab1.value && FMtab1.value.getMenuData(clickObj.value);
        break;
      case "1":
        FMtab2.value && FMtab2.value.getFondsData(clickObj.value);
        break;
      case "2":
        FMtab3.value && FMtab3.value.getCatalogData(clickObj.value);
        break;
      case "3":
        FMtab4.value && FMtab4.value.getFondsData(clickObj.value);
        break;
      case "4":
        FMtab5.value && FMtab5.value.getDeptData(clickObj.value);
        break;
      case "5":
        FMtab6.value && FMtab6.value.getDeskTopData(clickObj.value);
        break;
      case "6":
        FMtab7.value && FMtab7.value.getShortCutData(clickObj.value);
        break;
    }
  });
};
const save = () => {
  nextTick(() => {
    switch (active.value) {
      case "0":
        FMtab1.value && FMtab1.value.save();
        break;
      case "1":
        FMtab2.value && FMtab2.value.save();
        break;
      case "2":
        FMtab3.value && FMtab3.value.save();
        break;
      case "3":
        FMtab4.value && FMtab4.value.save();
        break;
      case "4":
        FMtab5.value && FMtab5.value.save();
        break;
      case "5":
        FMtab6.value && FMtab6.value.save();
        break;
      case "6":
        FMtab7.value && FMtab7.value.save();
        break;
    }
  });
};
onMounted(() => {
  getTableData();
});
</script>
<style lang="scss" scoped>
@import "./index.scss";
.tab-content {
  display: flex;
  .tabs-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    :deep(.el-tabs__header) {
      margin-left: 10px;
    }
    .btn {
      width: 126px;
    }
  }
}
</style>
